{% extends 'game/base.html' %}
{% block style %}
{% endblock %}
{% block main %}
    <el-tabs  type="card" @tab-click="handleClick">
        <el-tab-pane label="基础相似度" name="1"></el-tab-pane>
        <el-tab-pane label="余弦相似度" name="2"></el-tab-pane>
        <el-tab-pane label="余弦alpha相似度" name="3"></el-tab-pane>
    </el-tabs>
    <el-table
    :data="tableData"
    style="width: 100%"
    max-height="600">
        <el-table-column
          fixed
          prop="game_name"
          label="游戏名"
          width="120">
        </el-table-column>
        {% for obj in objs %}
            <el-table-column
              prop='{{ obj.id }}'
              label={{ obj.name }}
              width="100">
            </el-table-column>
        {% endfor %}
    </el-table>
{% endblock %}
{% block app %}
    console.log(app);
    data1 = [
        {% for obj in objs %}
            {
            'game_name':'{{ obj.name }}',
            '1002':{{ obj.common_similarity[0] }},'1003':{{ obj.common_similarity[1] }},'1004':{{ obj.common_similarity[2] }},'1005':{{ obj.common_similarity[3] }},'1006':{{ obj.common_similarity[4] }},
            '1007':{{ obj.common_similarity[5] }},'1008':{{ obj.common_similarity[6] }},'1009':{{ obj.common_similarity[7] }},'1010':{{ obj.common_similarity[8] }},'1011':{{ obj.common_similarity[9] }},
            '1012':{{ obj.common_similarity[10] }},'1013':{{ obj.common_similarity[11] }},'1014':{{ obj.common_similarity[12] }},'1015':{{ obj.common_similarity[13] }},'1016':{{ obj.common_similarity[14] }},
            '1017':{{ obj.common_similarity[15] }},'1018':{{ obj.common_similarity[16] }},'1019':{{ obj.common_similarity[17] }},'1020':{{ obj.common_similarity[18] }},'1021':{{ obj.common_similarity[19] }},
            '1022':{{ obj.common_similarity[20] }},'1023':{{ obj.common_similarity[21] }},'1024':{{ obj.common_similarity[22] }},'1025':{{ obj.common_similarity[23] }},'1026':{{ obj.common_similarity[24] }},
            },
        {% endfor %}
    ];
    data2 = [
        {% for obj in objs %}
            {
            'game_name':'{{ obj.name }}',
            '1002':{{ obj.cos_similarity[0] }},'1003':{{ obj.cos_similarity[1] }},'1004':{{ obj.cos_similarity[2] }},'1005':{{ obj.cos_similarity[3] }},'1006':{{ obj.cos_similarity[4] }},
            '1007':{{ obj.cos_similarity[5] }},'1008':{{ obj.cos_similarity[6] }},'1009':{{ obj.cos_similarity[7] }},'1010':{{ obj.cos_similarity[8] }},'1011':{{ obj.cos_similarity[9] }},
            '1012':{{ obj.cos_similarity[10] }},'1013':{{ obj.cos_similarity[11] }},'1014':{{ obj.cos_similarity[12] }},'1015':{{ obj.cos_similarity[13] }},'1016':{{ obj.cos_similarity[14] }},
            '1017':{{ obj.cos_similarity[15] }},'1018':{{ obj.cos_similarity[16] }},'1019':{{ obj.cos_similarity[17] }},'1020':{{ obj.cos_similarity[18] }},'1021':{{ obj.cos_similarity[19] }},
            '1022':{{ obj.cos_similarity[20] }},'1023':{{ obj.cos_similarity[21] }},'1024':{{ obj.cos_similarity[22] }},'1025':{{ obj.cos_similarity[23] }},'1026':{{ obj.cos_similarity[24] }},
            },
        {% endfor %}
    ];
    data3 = [
        {% for obj in objs %}
            {
            'game_name':'{{ obj.name }}',
            '1002':{{ obj.cos_alpha_similarity[0] }},'1003':{{ obj.cos_alpha_similarity[1] }},'1004':{{ obj.cos_alpha_similarity[2] }},'1005':{{ obj.cos_alpha_similarity[3] }},'1006':{{ obj.cos_alpha_similarity[4] }},
            '1007':{{ obj.cos_alpha_similarity[5] }},'1008':{{ obj.cos_alpha_similarity[6] }},'1009':{{ obj.cos_alpha_similarity[7] }},'1010':{{ obj.cos_alpha_similarity[8] }},'1011':{{ obj.cos_alpha_similarity[9] }},
            '1012':{{ obj.cos_alpha_similarity[10] }},'1013':{{ obj.cos_alpha_similarity[11] }},'1014':{{ obj.cos_alpha_similarity[12] }},'1015':{{ obj.cos_alpha_similarity[13] }},'1016':{{ obj.cos_alpha_similarity[14] }},
            '1017':{{ obj.cos_alpha_similarity[15] }},'1018':{{ obj.cos_alpha_similarity[16] }},'1019':{{ obj.cos_alpha_similarity[17] }},'1020':{{ obj.cos_alpha_similarity[18] }},'1021':{{ obj.cos_alpha_similarity[19] }},
            '1022':{{ obj.cos_alpha_similarity[20] }},'1023':{{ obj.cos_alpha_similarity[21] }},'1024':{{ obj.cos_alpha_similarity[22] }},'1025':{{ obj.cos_alpha_similarity[23] }},'1026':{{ obj.cos_alpha_similarity[24] }},
            },
        {% endfor %}
    ];
    app.$data.tableData = data1;
    app.handleClick =
        function(name){
            console.log(name.name);
            switch(name.name){
                case "1":
                    app.$data.tableData = data1;
                    console.log(app.$data.tableData[0] );
                    break;
                case "2":
                    app.$data.tableData = data2;
                    console.log(app.$data.tableData[0] );
                    break;
                case "3":
                    app.$data.tableData = data3;
                    console.log(app.$data.tableData[0] );
                    break;
            }
        };
{% endblock %}
{% block js %}
{% endblock %}